<#import "../tpl/pageTep.ftl" as page>
<@page.pageBase currentMenu="视频监控">
    <!--suppress ALL -->
    <form id="searchForm" class="form-panel">
        <ul class="panel-content">
            <li>
                <div class="form-actions">
                    <div class="control-group span6">
                        <label class="control-label span2">
                            工作站：
                        </label>
                        <div class="controls span4">
                            <select name="sandpit" class="selectsend">
                                <option value="">全部</option>
                                <option value="0">马庄</option>
                                <option value="1">涂庄</option>
                            </select>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </form>
<div class="flex flex-wrap video-wrapper">

</div>

<script>
    function createRandomId() {
        return (Math.random()*10000000).toString(16).substr(0,4)+'-'+(new Date()).getTime()+'-'+Math.random().toString().substr(2,5);
    }
    function queryVideo(name) {
        $.ajax({
            type: 'GET',
            url: 'loadData',
            dataType: 'json',
            data: {sandpit: name},
            success: function (data) {
                var html = '', list = data.list;
                $.each(list, function (i, e) {
                  var id=  createRandomId();
                    html += '<div class="video-box">\n' +
                            '<video id="'+id+'"  class="video-js video-item mb5" width="500" height="350"  controls preload="auto" poster="${basepath}/resource/manage/images/lack.jpg" data-setup="{}" autoplay>\n' +
                            '<source src="' + e.url + '" type="rtmp/flv"></video>\n' +
                            '<div class="flex middle f16"><div class="cell-main">' + e.name + '#摄像头</div>\n' +
                            '<i class="iconfont icon-gou3-copy online">&nbsp;<a href="/rest/manage/video/toVideoHistory?id='+e.id+'"><span class="f14">回看</span></a></i></div></div>'
                });
                $('.video-wrapper').html(html);
                var iditem=$('.video-item');
                $.each(iditem,function (o,j) {
                    var id = $(j).attr('id');
                    videojs(id)
                })

            }
        })
    }
    $(function () {
        var name= getQueryString('name');
        $('.selectsend').val(name);
        switch (name){
            case '0':  name='马庄'; break;
            case '1':  name='涂庄'; break;
            default: name=''; break;
        }
        queryVideo(name);
        $('.selectsend').change(function () {
            var name = $(this).val();
            window.location.href="/rest/manage/video/toList?name="+name;
        });
    })
</script>
 <script src="${staticpath}/base/bui-admin/js/video.js"></script>
</@page.pageBase>
